<script>
import { article } from "../../api/article";
import listPage from "../page/03.vue";
import title from "../page/04.vue";
export default {
  data() {
    return {
      listData: [],
    };
  },
  methods: {
    async getData() {
      const data = await article();
      this.listData = data;
    },
    op() {
      this.listData = [];
    },
  },
  render(h) {
    console.log("我是reader");
    return (
      <div class="home">
        <h1>axios</h1>
        <p>
          <button onclick={this.getData}>发起请求</button>{" "}
          <button onclick={this.op}>清空列表</button>
        </p>
        {this.listData.length > 0
          ? h(listPage, { props: { list: this.listData } })
          : h(title)}
      </div>
    );
  },
};
</script>
<style lang="scss" scoped>
.home {
  text-align: center;
}
</style>